<template>
  <div class="mapInductionArea">
    <div
      v-for="(item, index) in featureIcon"
      :key="index"
      class="mapInductionArea_container"
      @click="openDrawAndInputHandler(item)"
    >
      <i class="iconfont" v-html="item.icon" />
      <span>{{ item.label }}</span>
    </div>
    <!-- 底部抽屉 -->
    <custom-popup-bottom
      :title="drawerParams.title"
      :show-drawer="drawerParams.show"
      @close="closeHandler"
    >
      <template #container>
        <component :is="dynamicComponentsParams.customComp" @selectLayers="selectLayersHandler" />
      </template>
    </custom-popup-bottom>
  </div>
</template>
<script>
import CustomPopupBottom from '@/components/common/custom-popup-bottom.vue'
import MapLayerChange from '@/views/map/components/mapLayerChange.vue'
import mapModuleChange from '@/views/map/components/mapModuleChange.vue'
import { hlzhitc, ygzhitc } from '@/utils/map/mapTools3x'

export default {
  components: { MapLayerChange, mapModuleChange, CustomPopupBottom },
  id: 'mapInductionArea',
  props: {},
  inject: ['layout'],
  data() {
    return {
      drawerParams: {
        show: false, // 抽屉状态
        title: '' // 弹窗标题
      },
      featureIcon: [
        { label: '检索', icon: '&#xe60f;' },
        { label: '模块', icon: '&#xe634;' },
        { label: '图层', icon: '&#xe61c;' }
      ],
      dynamicComponentsParams: {
        customComp: ''
      } // 动态组件配置
    }
  },
  created() {
  },
  methods: {
    /**
     * 打开检索框或底部抽屉
     * @param item
     */
    openDrawAndInputHandler(item) {
      console.log('item', item)
      if (item.label === '图层') {
        this.drawerParams.show = true
        this.drawerParams.title = item.label
        item.label === '图层' ? this.dynamicComponentsParams.customComp = 'mapLayerChange' : this.dynamicComponentsParams.customComp = 'mapModuleChange'
      }
    },
    /**
     * 关闭抽屉
     * @param payload
     */
    closeHandler(payload) {
      this.drawerParams.show = payload
    },
    /**
     * 选中图层结束的回调
     */
    selectLayersHandler(payload) {
      const { show, data } = payload
      this.drawerParams.show = show
      // 河流的显示和隐藏
      if (data.includes('rivers')) {
        hlzhitc(true, 1)
      } else {
        hlzhitc(false, 1)
      }
      // 遥感的显示和隐藏
      if (data.includes('remoteSensing')) {
        ygzhitc(1)
      } else {
        ygzhitc('')
      }
      // 地形图的显示和隐藏
      if (data.includes('topographicMap')) {
        ygzhitc(2)
      } else {
        if (!data.includes('remoteSensing')) {
          ygzhitc('')
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.mapInductionArea {
  position: absolute;
  z-index: 999;
  background-color: white;
  width: 95px;
  height: auto;
  right: 30px;
  top: 100px;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 8.0px 16.0px 16.0px hsl(0deg 0% 0%/0.25);

  &_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #e8e5e5;
    padding-bottom: 15px;
    margin-bottom: 15px;

    i {
      font-size: 34px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    font-size: 27px;
    font-weight: bold;
  }
}
</style>
